<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">

		<style>
			footer {
				display: none;
				position: fixed;
				width: 100%;
				height: 50px;
				min-height: 50px;
				border-top: solid 1px #bbb;
				left: 0px;
				bottom: 0px;
				overflow: hidden;
				padding: 0px 65px 0 10px;
				background-color: #fafafa;
			}
			
			.footer-left {
				position: absolute;
				width: 50px;
				height: 50px;
				left: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 12px 4px;
			}
			
			.footer-right {
				position: absolute;
				width: 115px;
				height: 50px;
				right: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 7px 0px 5px 0;
				display: inline-block;
			}
			
			.footer-center {
				height: 100%;
				padding: 5px 0px;
			}
			
			.footer-center [class*=input] {
				width: 65%;
				height: 100%;
				border-radius: 5px;
			}
			
			.footer-center .input-text {
				background: #fff;
				border: solid 1px #ddd;
				padding: 10px !important;
				font-size: 16px !important;
				line-height: 18px !important;
				font-family: verdana !important;
				overflow: hidden;
			}
			
			.footer-center .input-sound {
				background-color: #eee;
			}
			
			.mui-content {
				height: 100%;
				padding: 0px 0px 50px 0px;
				overflow: auto;
				background-color: #eaeaea;
			}
			
			#msg {
				height: 100%;
				width: 100%;
				overflow: auto;
				transition: all 0.25s ease-in-out;
				-webkit-overflow-scrolling: touch;
			}
			
			#footer-link{
				transition: all 0.15s ease-in-out; 
			}
			
			#emoji>span{
				display: inline-block;
				font-size: 25px;
				margin: 5px 5px;
			}
			
			html,
			body {
				background-color: #efeff4;
			}
			#main-content{
				overflow: scroll;
			}
			
			.mui-bar .mui-pull-left .mui-icon {
				padding-right: 5px;
				font-size: 28px;
			}
			
			.mui-bar .mui-btn {
				font-weight: normal;
				font-size: 17px;
			}
			
			.mui-bar .mui-btn-link {
				top: 1px;
			}
			
			.mui-content img{
				width: 100%;
			}
			.hm-description{
				margin: 15px;
			}
			
			.hm-description>li {
				font-size: 14px;
				color: #8f8f94;
			}
			
			#hearImg{
				height: 300px;
				overflow: scroll;
			}
			
			.mui-content-padded>img{
				width: 113px;
				height: 113px;
			}
			
			.profile{
				border-radius: 5px
			}
			.link-style{
				background: #F7F7F7;
			}
			.link-style>span{
				color: #576493;
				font-weight: 700;
			}
			.link-style>p{
				margin: 5px 4px;
				color: #000000;
				font-size: 16px;
			}
			.link-style>p>span{
				color: #576493;
				font-weight: 700;
			}
			#msg-text {
			    width: 80%;
			    height: 100%;
			    border-radius: 5px;
			}
			
			#emoji{
				display: none;
				overflow-y: scroll;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 150px;
				background-color: #fff;
				transition: all 0.15s ease-in-out; 
				padding: 10px 20px;
				padding-left: 30px;
			}
			#my-profile{
				position: absolute;
				right: 20px;
				top: 240px;
				width: 80px;
				height: 80px;
				z-index: 2;
				border-radius: 25px;
			}
		</style>
	</head>

	<body>

		<header id="header" class="mui-bar mui-bar-transparent">
			<a id="link_back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #007AFF;"></a>
			<h1 class="mui-title" style="color: #007AFF;">朋友圈</h1>
			<span class="mui-icon mui-icon-camera mui-icon-right-nav mui-pull-right" style="color: #007AFF;font-size: 2em;transform: translateY(-3px);"></span>
		</header>

		<div class="mui-content" id="main-content">
			<!--静态图片-->
			<div id="hearImg">
				<img id="img1" src="../images/bg.png" />
			</div>
			<p style="font-size: 20px;text-align: right;margin-right: 120px;padding-top: 10px;color: #000000;">洪潇涵</p>
			<img id="my-profile" src="../css/registLogin/avatar.jpg" >
			<ul class="mui-table-view" style="margin-top: 20px;">
				<li class="mui-table-view-cell mui-media">
					<img class="profile  mui-media-object mui-pull-left" src="../css/registLogin/avatar.jpg">
					<div class="mui-media-body">
						<span>幸福</span>
						<p>图片全屏后，双击或双指缩放均可对图片进行放大、缩小操作，左右滑动可查看同组(data-preview-group相同的图片为一组)其它图片，点击会关闭预览</p>
						<span id="link_btn" class="mui-pull-right" style="color: #007AFF;margin-left: 10px;">点赞</span>
						<span id="comment_btn" class="mui-icon mui-icon-chatboxes mui-pull-right" style="color: #007AFF;"></span>
					</div>
				</li>
				<li class="mui-table-view-cell mui-media">
					<img class="profile mui-media-object mui-pull-left" src="../css/registLogin/avatar.jpg">
					<div class="mui-media-body">
						<span>幸福</span>
						<p>图片全屏后，双击或双指缩放均可对图片进行放大、缩小操作，左右滑动可查看同组(data-preview-group相同的图片为一组)其它图片，点击会关闭预览</p>
						<ul class="mui-table-view mui-grid-view mui-content-padded">
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><img src="../css/registLogin/avatar.jpg" /></li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><img src="../css/registLogin/avatar.jpg" /></li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><img src="../css/registLogin/avatar.jpg" /></li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><img src="../css/registLogin/avatar.jpg" /></li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><img src="../css/registLogin/avatar.jpg" /></li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><img src="../css/registLogin/avatar.jpg" /></li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><img src="../css/registLogin/avatar.jpg" /></li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><img src="../css/registLogin/avatar.jpg" /></li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><img src="../css/registLogin/avatar.jpg" /></li>
						</ul>
						<ul class="mui-table-view">
							<li class="link-style mui-table-view-cell">
								<span><img style="width: 18px;height: 18px;" src="../images/givememoney.png"></span>
								<span>洪潇涵,</span>
								<span>洪潇涵,</span>
								<span>洪潇涵</span>
							</li>
						</ul>
						<ul class="mui-table-view">
							<li class="link-style mui-table-view-cell">
								<p><span>洪潇涵:</span>你好图片全屏后图片全屏后图片全屏后图片全屏后图片全屏后图片全屏后图片全屏后lllllllllllllll</p>
								<p><span>洪潇涵:</span>图片全屏后，双击或双指缩放均可对图片进行放大、缩小操作，左右滑动可查看同组(data-preview-group相同的图片为一组)其它图片，点击会关闭预览</p>

							</li>
						</ul>
						<span id="link_btn" class="mui-pull-right" style="color: #007AFF;margin-left: 10px;">点赞</span>
						<span id="comment_btn" class="mui-icon mui-icon-chatboxes mui-pull-right" style="color: #007AFF;"></span>
					</div>

				</li>
				<li class="mui-table-view-cell mui-media">
					<img class="profile  mui-media-object mui-pull-left" src="../css/registLogin/avatar.jpg">
					<div class="mui-media-body">
						<span>幸福</span>
						<p>图片全屏后，双击或双指缩放均可对图片进行放大、缩小操作，左右滑动可查看同组(data-preview-group相同的图片为一组)其它图片，点击会关闭预览</p>
						<span id="link_btn" class="mui-pull-right" style="color: #007AFF;margin-left: 10px;">点赞</span>
						<span id="comment_btn" class="mui-icon mui-icon-chatboxes mui-pull-right" style="color: #007AFF;"></span>
					</div>
				</li>


			</ul>
		</div>


		<footer id="footer-link">
			<div class="footer-center">
				<textarea id="msg-text" placeholder="评论" type="text" class='input-text'></textarea>
			</div>

			<div class="footer-right">
				<!-- 表情包 -->
				<button id="emoji-link" type="button" style="margin-left: 2px;">
					<svg style="margin-top: 3px;" xmlns="http://www.w3.org/2000/svg" width="20" height="15" viewBox="0 0 24 24" fill="none"
					 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smile">
						<circle cx="12" cy="12" r="10"></circle>
						<path d="M8 14s1.5 2 4 2 4-2 4-2">
						</path>
						<line x1="9" y1="9" x2="9.01" y2="9">
						</line>
						<line x1="15" y1="9" x2="15.01" y2="9">
						</line>
					</svg>
				</button>
				<!-- 发送 -->
				<button class="btn btn-primary" id="send">
					<svg style="margin-top: 5px;" xmlns="http://www.w3.org/2000/svg" width="20" height="13" viewBox="0 0 24 24" fill="none"
					 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-send">
						<line x1="22" y1="2" x2="11" y2="13"></line>
						<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
					</svg>
				</button>
			</div>
		</footer>
		<!-- 表情包内容 -->
		<div id="emoji">

		</div>


		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>

		<script type="text/javascript">
			mui.init();
			//图片预览效果
			var images;
			var urls = [];
			//表情包数组
			var emojiArray = ['😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊', '😋', '😎',
				'😍', '😘', '😗', '😙', '☺', '🙂', '🤗', '🤔', '😐', '😶', '🙄', '😏', '😣', '😥', '😮', '😪', '😫', '😴', '😛',
				'😌', '😨', '😰', '😱', '😵', '😳', '😡', '💩', '🤐', '🤤', '🤑', '😲', '😖', '😸', '😼', '😻', '👀'
			];


			//初始化表情包
			function emojiInit(obj) {
				var emojiHTML = '';
				for (var i = 0; i < emojiArray.length; i++) {
					var str = "<span>" + emojiArray[i] + "</span>";
					emojiHTML += str;
				}
				obj.innerHTML = emojiHTML;
			}

			function imagesPreview() {
				images.forEach(function(item) {
					urls.push(item.src);
				});
				mui('.mui-content-padded').on('tap', 'img', function() {
					var index = images.indexOf(this);
					plus.nativeUI.previewImage(urls, {
						current: index,
						indicator: 'number'
					});
				});
			}


			mui.plusReady(function() {

				images = [].slice.call(document.querySelectorAll('.mui-content-padded img'));
				imagesPreview();

				emojiInit(document.getElementById('emoji'));
				document.getElementById('hearImg').scrollTop = 500;
				//设置系统状态栏颜色
				plus.navigator.setStatusBarBackground("rgb(247, 247, 247)");
				document.getElementById('link_back').addEventListener('tap', function() {
					plus.navigator.setStatusBarBackground("#007AFF");
				})

				//表情包内容对象
				var emojiContent = document.getElementById('emoji');
				//控制表情对象
				var emojiLink = document.getElementById('emoji-link');

				//输入栏
				var msgText = document.getElementById('msg-text');


				var footerLink = document.getElementById('footer-link');


				//点赞对象
				var linkBtn = document.getElementById('link_btn');
				//评论对象
				var commentBtn = document.getElementById('comment_btn');

				linkBtn.addEventListener('tap', function() {
					app.showToast('点赞');
				})

				document.body.onscroll = function() {
					emojiContent.style = 'display: none;';
					emojiFlag = 1;
					footerLink.style = 'display: none;';
					commentFlag = 1;
				}
				var emojiFlag = 1;
				var commentFlag = 1;
				commentBtn.addEventListener('tap', function() {
					if (commentFlag === 1) {
						footerLink.style = 'display: block;';

						commentFlag = 0;
					} else {
						footerLink.style = 'display: none;';
						commentFlag = 1;
					}
				})

				//把表情追加到输入栏
				emojiLink.addEventListener('click', function(e) {
					if (emojiFlag === 1) {
						console.log(document.body.scrollTop);
						emojiContent.style = 'display: block;';
						emojiContent.style.top = document.body.scrollTop + 575 + 'px';
						emojiFlag = 0;
					} else {
						emojiContent.style = 'display: none;';
						emojiFlag = 1;
					}
				})


			});
		</script>

	</body>

</html>
